<template>
<d2-container>
  <template slot="header">
    <div style="position: relative;">
      <label >材料统计</label>
      <el-form  label-width="80px">
        <el-input v-model="search" placeholder="Search..." @keyup.enter.native="requestData(1)"
                  style="position: absolute; width: 250px;right: 0;top:0;"></el-input>
      </el-form>
    </div>
  </template>
  <div>
    <el-table :data="tableData" border style="width: 100vw">
      <el-table-column fixed prop="id" label="ID" width="170"></el-table-column>
      <el-table-column prop="alias" label="材料名" width="180"></el-table-column>
      <el-table-column prop="supplier" label="供应商" width="180"></el-table-column>
      <el-table-column prop="total" label="总量" width="120"></el-table-column>
      <el-table-column prop="surplus" label="剩余数量" width="120"></el-table-column>
      <el-table-column prop="type" label="类型" width="120"></el-table-column>
      <el-table-column prop="deadline" label="过期日期" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="这条记录确定要删除吗？"
            @onConfirm="popConfirm(scope.row);deleteRow(scope.$index, tableData)"
          >
            <el-button slot="reference" type="text" size="small">删除 |</el-button>
          </el-popconfirm>
          <el-button type="text" size="small" @click="editClick(scope.row) ">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pages" @current-change="requestData"></el-pagination>
  </div>
  <el-dialog title="信息修改" :visible.sync="dialogFormVisible" center>
    <el-form :model="update">
      <el-form-item label="ID" :label-width="formLabelWidth">
        <el-input v-model="update.id" :disabled="true" @input="updateDataSyncId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="名字" :label-width="formLabelWidth">
        <el-input v-model="update.alias" @input="updateDataSyncAlias" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="供应商" prop="supplier" :label-width="formLabelWidth">
        <el-select v-model="update.supplier" placeholder="请选择供应商">
          <el-option v-for="item in update.supplier_category" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原料类型" prop="type" :label-width="formLabelWidth">
        <el-select v-model="update.type" placeholder="请选择原材料类型">
          <el-option v-for="item in update.type_category" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="剩余" :label-width="formLabelWidth">
        <el-input v-model="update.surplus" @input="updateDataSyncSurplus" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="总量" :label-width="formLabelWidth">
        <el-input v-model="update.total" @input="updateDataSyncTotal" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="到期时间" :label-width="formLabelWidth">
        <el-input v-model="update.deadline" @input="updateDataSyncDeadline" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="update.remark" @input="updateDataSyncRemark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>

      <el-popconfirm
        title="确定要修改吗？"
        @onConfirm="updateClick()"
      >
        <el-button slot="reference">提 交</el-button>
      </el-popconfirm>
    </div>
  </el-dialog>
</d2-container>
</template>

<script>
import {request} from "@/network/request";

const axios = require('axios');

export default {
  name: 'material',
  methods: {
    //前端页面删除
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //提交按钮点击后上传修改后的数据
    updateClick() {
      console.log("修改确认一点击");
      let _this = this;
      request({
          url: 'material/update',
          method: 'put',
          params: {
            id: _this.update.id,
            alias: _this.update.alias,
            supplier: _this.update.supplier,
            surplus: _this.update.surplus,
            deadline: _this.update.deadline,
            total: _this.update.total,
            type: _this.update.type,
            remark: _this.update.remark
          }
        }, res => {
          console.log(res);
          if (res.data === false) {
            alert("修改失败！请重试！");
          } else {
            alert("成功修改！");
            _this.dialogFormVisible = false;
          }
        }, err => {
          console.log(err);
        }
      );

    },
    //删除确认按钮
    popConfirm(row) {
      request({
          url: 'material/del',
          method: 'delete',
          params: {
            id: row.id
          }
        }, res => {
          console.log(res);
        }, err => {
          console.log(err);
        }
      );
    },
    requestData(currentPage) {
      let _this = this;
      request({
        url: 'material/query',
        params: {
          key: _this.search,
          pages: currentPage,
          num:10
        },
      }, res => {
        _this.tableData = res.data.records;
        _this.pages = res.data.pages * 10;
        for (let i = 0; i < res.data.total; i++) {
          _this.tableData[i].createTime = _this.tableData[i].createTime.toString().replace('T', ' ').slice(0, 19);
          _this.tableData[i].updateTime = _this.tableData[i].updateTime.toString().replace('T', ' ').slice(0, 19);
        }
      }, err => {
        console.log(err);
      });
    },
    updateDataSyncId(event) {
      this.update.id = event;
    },
    updateDataSyncAlias(event) {
      this.update.alias = event;
    },
    updateDataSyncSurplus(event) {
      this.update.surplus = event;
    },
    updateDataSyncSupplier(event) {
      this.update.supplier = event;
    },
    updateDataSyncTotal(event) {
      this.update.total = event;
    },
    updateDataSyncDeadline(event) {
      this.update.email = event;
    },
    updateDataSyncRemark(event) {
      this.update.remark = event;
    },
    updateDataSyncType(event) {
      this.update.type = event;
    },
    editClick(row) {
      let _this = this

      this.dialogFormVisible = true;
      this.update.id = row.id;
      this.update.alias = row.alias;
      this.update.supplier = row.supplier;
      this.update.total = row.total;
      this.update.surplus = row.surplus;
      this.update.deadline = row.deadline;
      this.update.type = row.type;
      this.update.remark = row.remark;

    }
  },
  created() {
    let _this = this;
    this.requestData(1);

    //原材料分类数据
    request({
        url: 'materialCategory/query',
        params: {
          key: '',
          pages: 1,
          num:100
        },
      },
      res => {
        console.log(res.data.records.length);
        _this.update.type_category = [];
        for (let i = 0; i < res.data.records.length; i++) {
          _this.update.type_category.push(res.data.records[i].name) ;
        }
      },
      err => {
        console.log(err);
      });

    //供应商数据
    request({
        url: 'supplier/query',
        params: {
          key: '',
          pages: '1',
          num:100
        },
      },
      res => {
        _this.update.supplier_category = [];
        for (let i = 0; i < res.data.records.length; i++) {
          _this.update.supplier_category.push(res.data.records[i].fullName) ;
        }
      },
      err => {
        console.log(err);
      })
  },
  data() {
    return {
      search:'',
      pages: null,
      tableData: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      update: {
        id: '',
        alias: '',
        deadline: '',
        supplier: '',
        surplus: '',
        total: '',
        type: '',
        remark: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>
